<template>
    <div class="wh-100 mb-12 overflow-auto">
        <!--头部-->
        <div class="w-100 d-flex-center mb-12" style="background-color: #006ff9">
            <div class="w-80 px-16 d-flex-between-center" style="height: 50px">
                <div class="d-flex align-items-center">
                    <div style="width: 30px; height: 30px; border-radius: 50%" class="debugger-bor-5"></div>
                    <div class="ml-12" style="color: white; font-size: 20px; font-weight: bold">河南省大中专毕业生24365就业平台</div>
                </div>
                <div class="d-flex align-items-center">
                    <div style="color: white; font-size: 16px; margin-right: 15px">你好,管理员，郭经理</div>
                    <div class="text-center" style="cursor: pointer; line-height: 25px; width: 40px; height: 25px; border: 1px solid #fff; background-color: #006ff9; color: white; font-size: 14px">
                        退出
                    </div>
                </div>
            </div>
        </div>
        <!--面包屑-->
        <div class="w-100 d-flex-center mb-12" style="height: 40px">
            <Breadcrumb class="w-80 d-flex align-items-center pl-36 h-100" style="background-color: #fff; border-radius: 4px" separator=">">
                <div style="width: 30px; height: 30px"></div>
                <div class="mx-12">当前位置:</div>
                <BreadcrumbItem to="/" style="color: #989898">首页</BreadcrumbItem>
                <BreadcrumbItem v-for="(item, index) in crumbsName" :key="index">
                    {{ item }}
                </BreadcrumbItem>
            </Breadcrumb>
        </div>
        <!--侧边栏&内容-->
        <div class="w-100 h-85 d-flex-center">
            <div class="w-80 h-100 d-flex">
                <!--侧边栏-->
                <div class="h-100 mr-12" style="width: 240px">
                    <Menu v-if="menuState" style="border-radius: 6px" class="h-100 w-100" @on-select="selectMenu" :active-name="menuActiveName" :open-names="openMenu" accordion>
                        <div style="height: 100px" class="debugger-bor mb-12"></div>
                        <MenuItem name="Workbench">
                            <Icon type="md-home" />
                            工作台
                        </MenuItem>
                        <Submenu v-for="(item, index) in menuList" :key="index" :name="item.title">
                            <template slot="title">
                                <div class="d-flex align-items-center">
                                    <Icon type="md-person" class="mr-12" />
                                    <div class="mr-12">{{ item.title }}</div>
                                    <div v-if="item.status" style="width: 8px; height: 8px; background-color: #f00; border-radius: 50%"></div>
                                </div>
                            </template>
                            <MenuItem v-for="(result, r) in item.menuName" :key="result.routerName" :name="result.routerName">
                                <template slot-scope="slot">
                                    <div class="d-flex align-items-center">
                                        <div class="mr-12">{{ result.name }}</div>
                                        <div v-if="result.status" style="width: 8px; height: 8px; background-color: #f00; border-radius: 50%"></div>
                                    </div>
                                </template>
                            </MenuItem>
                        </Submenu>
                    </Menu>
                </div>
                <!--内容-->
                <div class="flex-1 overflow-auto" style="border: 1px solid rgba(238, 241, 246); background-color: #fff; border-radius: 6px">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// region TODO 菜单当前激活
const menuActiveName = 'Workbench';
const openMenu = [];
const menuState = false;
// endregion

// region TODO 菜单项
const menuList = [
    {
        title: '招聘管理',
        status: true,
        menuName: [
            { name: '高校入驻', routerName: 'UniversitySettlement', status: true },
            { name: '职位管理', routerName: 'PositionManagement', status: false },
            { name: '招聘简章', routerName: 'RecruitmentBrochure', status: false },
            { name: '简历管理', routerName: 'ResumeManagement', status: true },
            { name: '面试管理', routerName: 'InterviewManagement', status: true },
            { name: '人才管理', routerName: 'TalentManagement', status: true },
            { name: '网签管理', routerName: 'TabManagement', status: true },
            { name: '解约管理', routerName: 'TerminationManagement', status: true }
        ]
    },
    {
        title: '双选活动',
        status: false,
        menuName: [
            { name: '数据总览', routerName: 'DataOverview', status: false },
            { name: '双选会', routerName: 'MutualSelection', status: false }
        ]
    },
    {
        title: '消息通知',
        status: true,
        menuName: [{ name: '消息通知', routerName: 'MessageNotification', status: true }]
    },
    {
        title: '系统管理',
        status: true,
        menuName: [
            { name: '企业信息', routerName: 'EnterpriseInformation', status: true },
            { name: '账户信息', routerName: 'AccountInformation', status: true },
            { name: '密码修改', routerName: 'ChangePassword', status: true },
            { name: '账户安全', routerName: 'AccountSecurity', status: true }
        ]
    }
];
// endregion

// region TODO 面包屑
const crumbsName = [];
const currentRoute = [];
// endregion
export default {
    data() {
        return {
            abc: '',
            menuState,
            openMenu,
            currentRoute,
            menuActiveName,
            menuList,
            crumbsName
        };
    },
    mounted() {
        if (this.$route.name) {
            this.menuActiveName = this.$route.name;
            this.selectMenu(this.menuActiveName);
            if (this.$route.meta.superior) {
                this.openMenu = [this.$route.meta.superior];
                this.menuState = true;
                this.crumbsName = [this.$route.meta.superior, this.$route.meta.title];
            } else {
                this.menuState = true;
                this.crumbsName = [this.$route.meta.title];
            }
        } else {
            this.selectMenu(this.menuActiveName);
            this.crumbsName = [this.$route.meta.title];
        }
    },
    watch: {
        $route(e) {
            if (e.meta.superior) {
                this.crumbsName = [e.meta.superior, e.meta.title];
                this.openMenu = [e.meta.superior];
                this.menuState = true;
            } else {
                this.crumbsName = [e.meta.title];
                this.menuState = true;
            }
        }
    },
    methods: {
        // region TODO 菜单
        selectMenu: function (name) {
            // this.crumbsName = this.$route.meta.title
            this.menuActiveName = name;
            this.$router.push({
                name: name
            });
        }
        // endregion
    }
};
</script>

<style scoped>
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    background: transparent;
}

.ivu-menu-vertical.ivu-menu-light:after {
    width: 0;
}

/deep/ .ivu-breadcrumb > span:last-child {
    color: #989898 !important;
}

/deep/ .ivu-breadcrumb a {
    color: #989898;
}
</style>
